<template>
  <div class="baseList">
    <div class="tableBoxs">
      <div class="newBox">
          <button class="bt wt-120" @click="handleBulid">
              新增护理项目
          </button>
      </div>
      <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
      <t-table row-key="index" :data="data" :columns="COLUMNS" stripe="true" bordered="true" hover="false"
        resizable lazy-load @row-click="handleRowClick">
        <template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>
        <template #price="{ row }">{{ row.price.toFixed(2) }}</template>
        <template #image="{ row }">
          <div>
            <div class="tdesign-demo-image-viewer__base">
              <t-image-viewer :images="[row.image]">
                <template #trigger="{ open }">
                  <div class="tdesign-demo-image-viewer__ui-image">
                    <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                    <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                      <span>
                        <BrowseIcon size="1.4em" /> 预览
                      </span>
                    </div>
                  </div>
                </template>
              </t-image-viewer>
            </div>
          </div>
        </template>
        <!-- 操作栏 -->
        <template #op="{ row }">
          <div class="operateCon">
            <a class="btn-dl">删除</a>
            <a class="font-bt" @click="handleEdit(row)">编辑</a>
            <a class="delete">禁用</a>
          </div>
        </template>
      </t-table>
      <t-pagination v-model="pagination.pageNum" v-model:pageSize="pagination.pageSize" :total="pagination.total"
        @change="onChange" />
    </div>
  </div>
</template>

<script setup lang="jsx">
import { COLUMNS } from '../constants'

// 由父组件传过来 属性
defineProps({
  // 接收的父组件传过来的属性data
  // 列表数据
  data: {
    // data的数据类型
    type: Object,
    // 给默认值
    default: {}
  },
  // 分页栏
  pagination: {
    // data的数据类型
    type: Object,
    // 给默认值
    default: {}
  }
});

// 定义接收的方法
const emits = defineEmits(['onChange','handleBulid','handleEdit']);

// 分页栏数据变更时触发
const onChange = (pageInfo) => {
  console.log(pageInfo)
  // 调用父组件的方法
  emits('onChange',pageInfo)
}

// 新增、修改窗口
const handleBulid = () => {
  // 调用父组件的方法
  debugger;
  emits('handleBulid')
}
// 编辑时调用父组件的方法
const handleEdit = (row) => {
  emits('handleEdit', row)
}


</script>
